<!-- 使用defineProps defineEmits 实现v-model父子组件通信 -->
<template>
    <div v-if="modelValue" class="model">
        <div class="close"><button @click="close">关闭</button></div>
        <h3>我是VModellll子组件</h3>
        <div>内容:<input :value="textVal" @input="change" type="text"></div>
    </div>
</template>
<script setup lang='ts'>
// import { ref, reactive } from 'vue'
// vue2 value vue3 modelValue
const props = defineProps<{
    modelValue: boolean,
    textVal: string,
    textValModifiers?: {
        isTx: boolean
    }
}>()

// 改值固定语法
const emit = defineEmits(['update:modelValue', 'update:textVal'])

const close = () => {
    emit('update:modelValue', false)
}
const change = (e: Event) => {
    const target = e.target as HTMLInputElement
    emit('update:textVal', target.value)
    emit('update:textVal', props?.textValModifiers?.isTx ? target.value + 'isTx方法被检测到' : target.value)
}

</script>
<style scoped></style>